import { Button, Input, Modal, message, List, Avatar, Form, } from "antd"
import { SearchOutlined, PlusOutlined } from '@ant-design/icons';
import React, { useState } from "react";
import { findUserFriend } from '@/api/chat/index'
import { Friend } from '@/modules/chat/index'
import style from './FiandUser.module.scss';
import { User } from "@/modules/login";
// import InfiniteScroll from 'react-infinite-scroll-component';
const { Search } = Input;

export default function FiandUser(props: any,) {
  const [modelstate] = useState<boolean>(false)
  const [serch, setserch] = useState<string>('')
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [items, setitems] = useState<Array<Friend>>([])
  const [page, setpage] = useState<number>(1)
  const [pageSize] = useState<number>(10)
  const [remark, setremark] = useState<string>('')
  const [isUserModalOpen, setisUserModalOpen] = useState(false);
  const user = JSON.parse(window.localStorage.getItem('user')!) as User

  const showModal = () => {
    setIsModalOpen(true);
  };

  const handleOk = () => {
    setIsModalOpen(false);
    setitems([])
    setserch('')
    setpage(1)
    setisUserModalOpen(false)
  };

  const handleCancel = () => {
    setIsModalOpen(false);
    setitems([])
    setserch('')
    setpage(1)
    setisUserModalOpen(false)

  };
  function serchHandle(event: React.InvalidEvent<HTMLInputElement>) {
    setserch(event.target.value)
    setitems([])
  }

  async function onSearch(enet: string) {

    const res = await findUserFriend(page, pageSize, enet)
    if (res.code === 400) {
      console.log("触发");
      message.error(res.msg)
      return
    }
    if (res.data.records.length === 0) {
      message.info('一曲肝肠断,天涯何处觅知音?')
      setitems([])
    } else {
      message.success('追寻到' + res.data.records.length + "名侠客")
      setitems([...res.data.records])
    }
  }


  function onopenordon() {
    console.log(modelstate);
    console.log("打开或关闭");
  }
  function realizeHandle() {

    setisUserModalOpen(true)

  }

  const userHandleOk = (id: number) => {


    props.adduser({
      remark: remark,
      addFromId: user.id,
      addTime: Date.now(),
      toId: id,
      nickname: user.nickname,
      headImg: user.headImg,
      code: 100,
      type: 100,
      msgType: 100,
    })
    message.success('已飞鸽传书与该英雄~')
    setisUserModalOpen(false)
  }

  function userHandleNo() {
    setisUserModalOpen(false)
  }

  function remarkHandle(event: React.ChangeEvent<HTMLInputElement>) {
    setremark(event.target.value)
  }
  return (
    <div className={style.serch}>

      <Form.Item
        name="search"
        rules={[{ required: true, message: 'Please input your username!' }]}
      >
        <Input
          className={style.input} addonBefore={<SearchOutlined className={style.icon} />} placeholder="江湖通缉" />
        <Button onClick={showModal} className={style.bt} icon={<PlusOutlined className={style.icon} />}></Button>
      </Form.Item>


      <Modal
        style={{
          right: 100
        }}
        afterOpenChange={onopenordon}
        bodyStyle={{
          width: 450,
          // height: 300,
          position: 'relative',
          boxSizing: "border-box",// 隐藏浏览器本身的滚动条
        }}
        mask={false} title="英雄榜" open={isModalOpen} onOk={handleOk} onCancel={handleCancel}>
        <Search
          onChange={serchHandle}
          value={serch}
          style={{
            width: "100%"
          }} onSearch={onSearch} enterButton placeholder="士为知己者死" />
        <div

        >
          {/* <InfiniteScroll
            refreshFunction={loadMoreData}
            dataLength={items.length}
            next={loadMoreData}
            // inverse={true} //
            // hasMore={}
            // pullDownToRefresh={true}
            hasMore={items.length < 50}
            loader={items.length === 0 ? "" : <Skeleton avatar paragraph={{ rows: 1 }} active />}
            endMessage={<Divider plain>仅此而已 🤐</Divider>}
            scrollableTarget="scrollableDiv"
          > */}
          <List
            id="scrollableDiv"
            style={{
              // height: 300,
              overflow: 'auto',
              display: 'flex',
              flexDirection: 'column-reverse',
            }}
            // loading={true }
            dataSource={items}
            renderItem={(item) => (
              <List.Item key={item.id}>
                <List.Item.Meta
                  avatar={<Avatar style={{ width: 50, height: 50 }} src={item.headImg} />}
                  title={<a href="https://ant.design">{item.username}</a>}
                  description={item.nickname}
                />
                <Modal
                  cancelText={item.gender === 1 ? "好汉饶命" : "美人饶命"}
                  okText={item.gender === 1 ? "义结金兰" : "佳偶天成"}
                  style={{
                    left: 320,
                    width: 300
                  }}
                  bodyStyle={{
                    width: "100px"
                  }}
                  width={300}
                  mask={false}
                  title="英雄" open={isUserModalOpen} onOk={() => userHandleOk(item.id)} onCancel={userHandleNo}>

                  <div style={{
                    display: "flex",
                    width: 260,
                    fontSize: 12
                  }}>
                    <Avatar style={{ width: 100, height: 100 }} src={item.headImg} />
                    <div>
                      <div style={{
                        fontSize: 15,
                        color: '#d94c3a',
                        textAlign: 'center'
                      }}>{item.nickname}</div>
                      <div
                        style={{
                          margin: 5,
                          fontSize: 12,
                        }}
                      >简介:{item.introduce}</div>
                      <div style={{
                        color: "green",
                        margin: 5
                      }}>飞鸽传书:{item.phone}</div>
                      <Input
                        placeholder="说些客套话"
                        value={remark}
                        onChange={remarkHandle}
                      ></Input>
                    </div>
                  </div>
                </Modal>
                <div><Button onClick={realizeHandle}>结识</Button></div>
              </List.Item>
            )}
          />
          {/* </InfiniteScroll> */}
        </div>

      </Modal >



    </div >
  )
}
